import { Link, useLocation } from 'react-router-dom';
import { HomeIcon, BookOpenIcon, LockClosedIcon, ChatBubbleLeftRightIcon } from '@heroicons/react/24/outline';

export default function BottomNav() {
  const location = useLocation();
  
  const navItems = [
    { name: '日记', path: '/diary', icon: <BookOpenIcon className="w-6 h-6" /> },
    { name: '备忘', path: '/notes', icon: <HomeIcon className="w-6 h-6" /> },
    { name: '密码', path: '/passwords', icon: <LockClosedIcon className="w-6 h-6" /> },
    { name: 'AI助手', path: '/ai-chat', icon: <ChatBubbleLeftRightIcon className="w-6 h-6" /> },
  ];

  return (
    <nav className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 z-50">
      <div className="flex justify-around items-center h-16 px-2">
        {navItems.map((item) => (
          <Link
            key={item.path}
            to={item.path}
            className={`flex flex-col items-center justify-center w-full h-full ${location.pathname === item.path ? 'text-primary dark:text-primary-300' : 'text-gray-500 dark:text-gray-400'}`}
          >
            <div className="w-6 h-6">
              {item.icon}
            </div>
            <span className="text-xs mt-1">{item.name}</span>
          </Link>
        ))}
      </div>
    </nav>
  );
}